A veces unas pequeñas modificaciones en un código pueden cambiar el aspecto considerablemente. Es de lo que se trata hoy de añadir una imagen de fondo a un Scroll.
Recuperamos el Scroll de imágenes que enlazan y añadimos enlaces tipo texto en lugar de las imágenes, también añadimos una imagen de fondo en lugar de color y un borde de mayor grosor.
El resultado sería más o menos así:


Google


Blogger


R.A.E





<marquee direction="up" scrollAmount="1" style="background:url('aquí la imagen'); text-align: center; width:90px;height:100px;border:2px solid #964E7B ;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='1'">
<a href="url-de-la-página" target="_blank">TEXTO</a><p>
<a href="url-de-la-página" target="_blank">TEXTO</a></p>
</marquee>


- En vista de los comentarios y que al parecer algunos tienen problemas para modificar el tamaño y color de fuente vamos a solucionarlo de la siguiente forma.
Añadiremos al mismo código el atributo <font> indicando el tipo,tamaño y color de fuente:


<marquee direction="up" scrollAmount="1" style="background:url('aquí la imagen'); text-align: center; width:90px;height:100px;border:2px solid #964E7B ;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='1'">
<a href="url-de-la-página" target="_blank"><font face="Arial" color="green" size=3>TEXTO</font></a><p>
<a href="url-de-la-página" target="_blank"><font face="Arial" color="green" size=3>TEXTO</font></a></p>
</marquee>


A sustituir "green" por el color a escoger "Arial" por el tipo de letra y "size=3" por el tamaño deseado.
produccionesdevanguardia

hola gema te escribo para agradecerte de nuevo la ayuda que me brindaste para poder crear mi blog te invito a que lo veas www.emergenciaserieweb.com.ve saludos..!!!

Responder
Doktor Gnómegang

Hola Gem@, Muy buena esta entrada, ya vere que invento con ella. Y gracias de nuevo por la ayuda que nos suministras para un mejor desempeño.

Si tienes tiempo llegate por mi blog, hay un pequeño detalle, un scroll en la barra lateral que he implementado, y que todavia no lo he visto en otra parte. Ya me dices. Y espero que te guste. (Tambien he añadido secciones).

Chao!

Doktor Gnomegang.-

Responder
Noa

Q pasada Gem@, mejor q anterior, teahorra espacio y queda mucho más bonito. Me encanta!
Ademas, estoy siempre viendo mi blog muy negro y eso me ha permitido también darle un poco de color, Gracias!

Responder
Anónimo

Bárbaro gem@!! Ahora voy a probarlo, pero mi imagen tiene los bordes redondeados, le puedo sacar el borde al código?
Y la medida de la imagen debe ser la que marca el código no? O sea, tengo que ponerle al código la medida de mi imagen?
Muchas gracias sos una genia!!
Y con respecto a lo del pie de mi blog que se volvió loco, solo sale así en explorer, ahora en Firefox lo veo bien.
Si te interesa estudiar un poco como son las plantillas de Miarroba, si querés te mando una a tu correo, los enlaces son diferentes que aquí, también tengo un blog en Blogger, pero Miarroba me da mas posibilidad de crear, la plantilla se divide en dos partes, el html y en otra pagina el css, a veces es un poco complicada pero yo le voy tomando la mano.
Gracias de nuevo GENIA!!
Y si podés contestame, yo igual voy a probar así como te dije, corrigiendo las medidas y sin borde a ver que pasa.
dr.gnomegang: que hermoso trabajo has hecho en esos scroll!! Te felicito!
Un saludo a todos :)

Responder
Anónimo

Hola gem@, otra vez yo, no me sale la imagen... :( que será?
Ya que estoy te hago otra pregunta, tienes idea de como achicar una imagen gif en paint? Es lo unico que mas o menos manejo, y que no pierda el movimiento?.
Y volviendo al scroll puede ser que relentize la carga de la pagina?
De donde sos gem@? De Argentina? Te pregunto porque no veo tu perfil en ninún lado, y como yo soy argentina, pensé que también lo eras, como vas mucho por lo de jmiur, por eso, de curiosa nomás.
Un beso :)
PD: Contestame por favor!http://img.photobucket.com/albums/v411/hells/more/23_28_101.gif

Responder
Doktor Gnómegang

Hola Gem@

Bingo!!! Ya logre algo interesante con el scroll.... Esta al final de la barra lateral en mi blog.

Grancias Mil

Chao

Responder
Gem@

produccionesdevanguardia te agradezco mucho el detalle de venir a presentar tu blog. (Tenía muchas ganas de verlo, en serio, siempre me gusta ver como ha quedado el blog pero... algunos perfiles no están disponibles y no es posible)
Gracias de nuevo está genial :)

Dr. Gnomegang cuando lo he visto ... sonreír y emocionarme ha sido todo una :)
Ha quedado un efecto simpático y como bien dices nada visto en otros blogs. Estoy segura que a partir de ahora muchos lo llevarán a la práctica.
Gracias sinceramente.

Me alegra que lo vieras de interés Noa :)

k_nelita vamos en orden de tus preguntas:
1-El borde lo puedes suprimir pero aunque lo suprimas seguirá teniendo esquinas ya que lo que suprimes es el borde no la caja :(
2-La medida no debe ser precisamente la de la caja puede ser mayor.
3-Referente al pie de tu blog no es extraño, es muy usual visionar diferencias en distintos navegadores.
4-Si no sale la imagen intenta alojar la imagen en un servidor externo para conseguir la url, copia bien el código sin omitir nada, reduce la imagen en caso de ser demasiado grande...
Para hacerlo más fácil copia el código que proporciono y a partir de él modificalo a tu gusto)
5-Las imágenes gif no admiten modificaciones porque pierden el efecto :( a no ser que las crees tu misma con algún programa.
6-Un scroll no debe hacer que la página tarde en cargar, lo que si lo hace es recargar en exceso el blog, pero sobretodo las imágenes grandes.

Soy española k_nelita mi perfil no está en el blog pero mis comentarios hacen enlace a mi perfil) :)
J.Miur es un gran blogger y una de las muchas páginas que me gusta visitar cuando el tiempo me lo permite :)
Te agradezco el ofrecimiento de la plantilla de mi arroba pero no es necesario, si tu te manejas mejor con ella ya es suficiente :)

Saludos cordiales :D

Responder
Gem@

Dr. Gnomegang jajaja está visto que el entusiasmo junto con la imaginación son sus compañeros de blog :)

Responder
Animita

hola
me gustó mucho la barra y la estoy probando en uno de mis blogs, pero lo que no me gustó mucho es que al agrandar la barra (en mi caso para que se viera más la imagen que le puse de fondo), no se pueden agrandar las palabras y como mi imagen es oscura no se ven bien.
me gustaría saber si hay alguna manera de agrandar las palabras o ensanchar las letras.

Saludos.

PD: por si quieres echar un vistazo está en http://animita-art.blogspot.com

Responder
Gem@

Animita prueba a agradar más el texto con el mismo editor de Blogger, una vez abres la entrada sitúate en Redactar y marca el texto que a continuación pondrás en mayor tamaño con el botón correspondiente para ese efecto.

Responder
Animita

Hola
gracias por contestarme, pero sabes que ayer se me ocurrió agregarle al código font-size:20px;
y con eso agrandé la letra.

también puse font-color:... para cambiar el color pero no me resultó, en todo caso el color que tiene no se ve mal, sólo lo quería un poco más oscura...

lo otro que no me resulta es que la imagen no de un salto cuando termina, he puesto imagenes de diferentes tamaños, pero todavía no doy con el resultado deseado.

Saludos.

Responder
Lord Fobia

Hola, tienes una gran pagina, me has ayudado mucho, felicidades por tu web, seguro que a muchas personas les ayudas, hace tiempo cuando inicie con mi pequenio blog no sabia que poner, gracias a tus post le e dado un toque de estilo que a muchos de mis amigos le gusta, te invito a visitar mi web... estaria muy bien que la visitaras y me dieras tu opinio en el guestbook que tengo... gracias otra vez, sigue asi...

Responder
Lord Fobia

Gracias por la ayuda que me has dado, gracias a tu blog le e dado un toque de estilo a mi pequenio blog, te invito a verlo, seria un honor que estubieras en mi guestbook... adios

fobiakorp.blogspot.com

Bye

Responder
Gem@

Animita con el atributo font puedes arreglar la fuente pero es que como yo te sugiero lo arreglas todo, tamaño, color...
Puedes hacer muchas cosas con el Scroll incluso añadir imágenes como nuestro amigo el Dr. Gnomegang.
Mira esta muestra que hice con el editor de Blogger, en redactar marcas el título y lo coloreas incluso.. puedes cambiar el modelo de letra y poner en negrita.
Lo que no entiendo es ¿un salto? la imagen queda fija.

Saludos Fobiakorp gracias por invitarme, estuve viendo tu blog te he dejado un comentario con una observación y de paso una pregunta :)

Responder
Anónimo

Hola gem@ ,yo sigo intentando infructuosamente poner la imagen de fondo, todo lo demás me sale bien, pero la imagen no me la toma, he probado con varias, de diferentes clases y tamaños, gif, jpg, etc.
Pero nada, yo todas la imagenes que tengo en el blog las tengo alojadas en el servicio de Miarroba y nunca he tenido problemas para poner ninguna ni en la sidebar ni en los artículos, no se que pasa con este sistema, la verdad, no entiendo...
Voya tratar de preguntar en el foro de soporte a ver si saben como hacerlo.
Muchas gracias por todo y un beso muy grande.

Responder
Kill[tro]
Este comentario ha sido eliminado por el autor.
Responder
Kill[tro]

weeena !!
de casualidad pase x tu blog y me encontre con este codigo q sta muy bueno ... lo aplike enseguida en mi blog jejeje

solo me gustaria saber .. cmo cambiarle el color a la letra :/

mi blog es http://amondisk.blogspot.com/

eso seria .... saludos ... y grax por el codigo ;)

Responder
Gem@

k_nelita mándame tu código vía mail, que pruebe para ver si es la imagen o el alojamiento.

Kill[tro] puedes añadir el atributo font pero resulta más sencillo si una vez escrito el código y situado en el editor de la misma entrada clicas en Redactar. De esa forma señalas con el ratón el texto y con el icono correspondiente le añades color, tamaño, tipo de letra ect...

Responder
Animita

Hola

No se cual es el botón de redactar... lo que hice fue marcar las letras en negrita con "b", pero no se donde está redactar y el botón de los colores.
Lo intenté haciéndolo en la creación de entredas pero no me permitió copiar el texto para situarlo en elemento de la página.

En cuanto al salto, me refiero a que cuando llega a la parte de abajo de la imagen, da un salto y empieza la imagen otra vez.

Si puedes me visitas para que lo veas
http://animita-art.blogspot.com

Saludos.

Responder
Gem@

Animita hice una captura para que veas donde dice Redactar en el editor de entradas.
Está numerado en el orden que debes hacerlo.
Una vez lo hagas prueba a añadir el código en una entrada, no debería darte problemas, si te los da en la sidebar mira si el ancho del Scroll es mayor que la sidebar.Aún no siéndolo debería quedar bien aunque quedaría el lateral derecho oculto.

Lo del salto debe ser problema del script (no está incluido)

Responder
Kill[tro]

sabes ... es q no lo estoy haciendo en una entrada.

ahora hise lo q dijiste, copie el codigo en una entrada para ver cmo kedaba y al parecer resulta, no lo probe.

es q genera este cofigo ( < p style="color: rgb(153, 153, 153);" >) ... y me gustaria un codigo mas limpio, pk lo voy a star constantemente actualizando ... aunq si no keda de otra, lo tendre q hacer con ese nomas.

igual gracias

Responder
Animita

JAjajajajajaja...

pa' la próxima mejor me explicas con peras y manzanas...

Ya está listo, aunque al clickear sobre las palabras no cambian de color.

Y en este otro lado
http://paczine.blogspot.com
en vez de links le puse la imagen con un texto y a una de las palabras del texto le puse un link, pero no me aparece el link en la pagina y sí en la vista previa...

Así que parece que voy a terminar como mi imagen...

Infinitas y paranormales gracias por tu ayuda.

Saludos desde el más allá.

Responder
Gem@

Knelita te he enviado varios intentos de código pero al copiarlo se distorsiona, espero veas el último mail donde te dejo un enlace para que puedas copiar el código esta vez sin problemas (eso espero)
El problema que tienes es que la url de la imagen no enlazaba con la imagen sino con el servidor de mi arroba, y que el código estaba incompleto, faltaba el cierre ;)

Kill[tro] he actualizado la entrada espero que ese código sea el que necesitas ;)

Animita como le dije a Kill[tro] he actualizado la entrada a lo mejor eso da respuesta a tus dudas, si continúas con los problemas mándame un mail y me explicas detalladamente o me pegas el código explicando qué resultado esperas al aplicarlo en tu blog :)

Responder
Anónimo

Hola gem@, no hay caso... puse el código todo como lo has puesto en el blog de pruebas, con () con ; con ', pero nada, no sale la imagen, incluso he puesto la imagen que vos subiste a imageshack y no, no sale :(
Ya no se que hacer... snif, snif
Besos

Responder
Gem@

¿No será que mi arroba no acepta esos códigos? pregunta en el foro que decías si hay códigos html que no los acepta o script, seguramente no aceptará script :(

Responder
Anónimo

Hola gem@, otra vez yo, te cuento, si, miarroba acepta esos códigos, sino no te los habría pedido, ya he puesto muchos.
Ahora si me acepto todo (era un acento que había puesto en lugar de una comilla) y funciona perfectamente aún con la imagen subida a mi servidor, pero he aquí que casi me muero al verlo con Explorer, que interpreta el maldito todo como se le ocurre, allí sale el fondo moviendose junto con los enlaces.
Estoy en tu blog con Explorer porqe vine a ver si a ti te pasaba lo mismo, y así es, la imagen que pusiste en tu blog de pruebas va subiendo junto con los enlaces, no queda fija como fondo, miralo por favor, y verás que horrible queda sobre todo que es una imagen que no es lisa, sino que tiene una parte de arriba degradada y abajo negra, incluso la que has puesto como ejemplo aquí arriba, que como es cuadrada no importaría, pero también corre.
Así que de momento opté por poner un fondo negro con borde, que eso auque se mueva no se ve, pero yo quería esa imagen porque es mas moderna, tipo web 2.0 por los bordes redondeados y el degradado, aparte que va de acuerdo al diseño del blog.
Si se te ocurre algo para que los dos navegadores interpreten lo mismo me cuentas si?
Muchas gracias por todo el trabajo que te has tomado, pero viste como es esto, hay mas personas que tienen el maldito Explorer y hay que fijarse que quede todo igual en los dos.
Un besote gem@ y mil gracias!

PD: Una recomendación, cuando hagas algún otro código fijate en ese detalle de los navegadores, porque nos acostumbramos a trabajar con FireFox y nos olvidamos que existe "el otro" (las comillas son con desprecio jaja)

Responder
Gem@

Gracias por el dato knelita, las diferencias con navegadores es algo que tengo muy asumido, pero estaría bien que si alguien ve un error nos lo hiciera saber a los que usamos un navegador diferente como hiciste tu.
A veces nos damos cuenta demasiado tarde y la solución por desgracia no está a nuestro alcance. Sin embargo hay errores como este que comentas, o por ejemplo el del favicón, o el texto dinamico en la barra del navegador la mayoría son script el error no está en el navegador sino que hay script que no son compatibles según con que navegador por eso no se ve desplazado el código, o el efecto distorsionado simplemente queda estático.
A lo mejor estoy confundida pero creo que es eso, el "dichoso" script :(

Responder
Anónimo

Pero el marquee no es un script o si?
Sabía que no interpretaba los script igual, pero por ejemplo el de el titulo en movimiento si lo capta de la misma forma, el favicon no.
Hay fotos o imagenes que no se ven en IE y otras si, es cosa de locos.
Bueno la cuestión es si sabes como se puede arreglar para que IE interprete que el fondo debe quedar fijo, algúna modificación debe haber no?
Dime que siiii....snif, snif :(

Responder
Gem@

Siento llegar tarde k_nelita veo que ya pusiste un fondo sin imagen :)

Responder
Anónimo

Hola gem@, si como dices puse un código sin imagen de color o fondo negro, que es el que has visto, pero no se como poner la imagen sin que se mueva, he andado preguntando por todos lados y me han dicho que todo lo que está entre marquee se mueve, no se te ocurre algo para ponerle antes del marquee? para poder poner una imagen fija, yo ya me he roto la cabeza pensando y probando, pero soy muy mala para esto de los códigos y no me sale nada, y como de costumbre se que hay gentes que saben pero no quieren explicarte.
No se si me has entendido, la imagen en FireFox sale bien, fija, pero en IE se mueve junto con los enlaces, interpreta distinto los códigos. Por eso la quité y puse un color de fondo, si se mueve no se nota, pero no es lo que quería.:(
Un beso gem@, vos si que te merecés el premio al blog solidario! Realmente te preocupas mucho por todos, muchas gracias!
Después te mando por mail otro problemita que tengo o mejor dicho inquietud por hacer algo, y no se como.
Beso

Responder
Gem@

Hola k_nelita quien te dice que todo lo que está dentro de maqueee se mueve lleva razón, yo también estuve probando de varias formas intentando incluir attachment: fixed: para fijar la imagen pero sin resultado.
¿Has preguntado a J.Miur?
De todas formas sigo mirando y probando si consigo algún resultado descuida que te comento ;)

Responder
Anónimo

Gracias gem@, no te olvidas de nada eres una genia! Yo también probé lo de atachament fixed o como se diga y no me resultó, he probado varias cosas ya, y sin ningún resultado.
Y,no, no le pregunté a JMiur porque a el fue el que primero pregunté y me mandó a tu blog, cuando empecé todo este lio.
Pero creo que encontré una herramienta mejor para los enlaces, la vi hoy en el blog la perla del turia, no me acuerdo como se llama, pero se ve lindo, me registré pero entiendo poco y nada porque está todo en ingles, después le voy a preguntar a Carlos como lo hizo.
O si quieres date una vuelta por la perla y lo ves, seguro que entenderás, es una caja azul que contiene todos los enlaces, pero yo no pude poner mas que uno, ja ja, soy tan burra con el ingles...
Seguramente te va a servir de material para recomendar en tu blog.
El scroll ya me cansó, he ido por todos lados preguntando y nadie me sabe decir nada, y aparte ahora que vi eso me gusta mas, porque cuando en el scroll quieres entrar a un enlace, sobre todo teniendo muchos, tienes que esperar a que vayan pasando para encontrar el que quieres pinchar.
Ah ya que estoy te doy mi opinión sobre tus cambios, me gustan mucho, la linea roja que te criticaron a mi me gusta y todo lo demas también, extraño un poco las rosas, creo que tendrías que poner allí alguna otra imagen en lugar del fondo gris.
Yo también estoy en continuo cambio, después te cuento.
Un besote :)

Responder
Animita

No se si te llegó el mail que te mandé, pero ahí te contaba que al ocupar ese código actualizado , no me apareció imagen alguna...

han de ser los misterios virtuales...

Saludos paranormales.

Responder
Gem@

Animita donde dice aquí la imagen debes añadir la url de la imagen (las comillas y los paréntesis déjalos tal y como están):)

Responder
Gem@

k_nelita muchas gracias por avisarme y por aportar otra nueva idea :)

Responder
Ronymaru

Queiro seguir visitando tu blog , te espero en mi librito de visitas.

Responder
Gem@

Bienvenida Ronymaru :)

Responder
LAP CAMISETAS

hola cmo stas ojala que este blog esta muy bueno ayuda bastante
oye como haces para poner ese cuadro donde pusiste los codigos es que quiero poner un codigo de una imagen en miblog y sin eso no puedo porque sepone la imagen y yo uiero poneer el codigo ojala me respondas mi correo es asechador_1989@yahoo.es

Responder
Anónimo

Hola como estan la verdad esta muy bueno todo eso pero yo quisiera saber como puedo hacer para q se mueva el texto con scroll pero el fondo no se mueva para nada solamente el texto que vaya hacia arriba como lo en otras paginas

gracias por todo

Responder
Gem@

No se mueve el fondo anónimo sino el texto :(

Responder
Anónimo

Hola Gema!
pues antes que nada, felicitarte por tu página y decirte que eres muy generosa al compartir tus conocimientos.
Quisiera también consultarte, pues no soy para nada ni diseñadora de páginas, ni nada de eso... y mucho menos sé nada de los códigos...
Hice blog y quisiera poner un scroll, como el que tienes con imágen de fondo... Quisiera meter noticias e irlas actualizando.
Encontré un programa que se llama TEXT ANIMATOR, claro que lo tendría que comprar. Y encontré uno gratuito http://www.jpowered.com/javascript/scrolling-text/configurator.html, la cosa es que lo puedo crear, pero luego vienen unas indicaciones con los códigos (dos ventanas diferentes) y hay que copiar y pegar... no tengo la más remota idea de en dónde pegarlos y cómo pegarlos... podrías ayudarme?
Muchas gracias!

Responder
Gem@

Hola Alex, pues la verdad no sé que códigos proporciona, he mirado para descargarlo pero al ser un archivo exe no termina de convencerme.
Si quieres mándame el código a mi correo y te digo como añadirlo.
De todas formas hay muchas ideas de añadir un scroll Texto queda muy bien y puedes incluir enlaces tipo texto en su interior.

Responder
Anónimo

Gema, he tratado de enviarte el código, pero no puedo pasartelo no sé porqué...
Tendrás algún otro correo en donde pueda yo enviartelo?
Muchísimas gracias!

Responder
Gem@

Puedes enviarlo a forevergema(arroba)gmail.com

Responder
Ana Belén

Hola, espero que puedas echarme una mano, estoy dandole vueltas a un problemilla con una web. Queremos poner un scrollbox con RSS a una etiqueta comcreta del blog para que se autopublique solo en lugar de meter las cosas manualemnte. He probado mil y un programitas y widgets de internet pero ninguno funciona bien.

Si entras en www.alquimiasonora.com verás que he dejado uno preliminar en busca de ayuda. Se trata del texto que sale al lado de noticias, quería que quedase ese efecto pero desgraciadamente no funciona el link a la noticia en concreto.

¿Me puedes echar un cable?

De todos los que he probado el que mejor se ajusta es :

http://www.rsspump.com/Default.aspx

Pero no consigo hacerlo funcionar correctamente (no abren los enlaces)

El Rss que quiero aplicar es:

http://www.alquimiasonora.com/feeds/posts/default/-/Noticias

Mil gracias por adelantado

Responder
Gem@

:: No lo veo añadido en tu blog Ana Belén :)

Responder
Ana Belén

Perdona, es que estaba fuera este puente y lo dejé desactivado. Ya vuelve a estar (mal) para que le eches un ojo. Mil gracias.

Responder
Anónimo

Hola gema, acabo de poner el scrolling en mi blog pero una pregunta,, como le hago para que el texto quede mas separado como el que pusiste arriba??

es que todo queda muy pegado:S..

espero me puedas ayudar..
gracias de antemano.

Responder
Anónimo

Hola gema, me paso de nuevo por aqui, ya pude resolver lo que escribì arriba.

Solo que con google chrome no se detiene cuando paso el mouse ni con el safari, pero en fin..

otra pregunta, como le hago para agregar iconos a mi blogger como los que tienes en comentarios, porque busque en internet y no encontre nada..

Y tambien como le hago para enumerar mis comentarios como los tuyos.

espero me puedas ayudar..:)

saludos de antemano.

Responder
Gem@

:: Saludos Erik Eduar, en la siguiente url verás la forma de añadir avatar a comentarios y también un enlace a las explicaciones para numerar los comentarios.

http://gemablog-.blogspot.com/2009/09/avatar-en-comentarios.html

Responder
Gem@

:: Erik lo del scrolling a qué separación te refieres?? puedo ver un ejemplo?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top